<template>
	<view class="attr-content">
		<view class="a-t">
			<image class="image" mode="widthFix" :src="picture || product.spec_items[0].thumbnail"></image>
			<view class="right">
				<text class="title in2line">{{ product.spec_items[0].pname }}</text>
				<view class="sku-info-wrapper">
					<view class="price-wrapper">
						<text :class="'text-' + themeColor.name">{{ moneySymbol }}{{ product.spec_items[0].price }}</text>
					</view>
					<text class="stock">库存：{{ product.spec_items[0].stock }}{{ product.unit || '个' }}</text>
				</view>
			</view>
		</view>
		<scroll-view class="attr-content-scroll-view" scroll-y>
			<view class="select-count" v-if="isSelectedNum">
				<text>购买数量</text>
				<rf-number-box
					class="step"
					:min="parseInt(product.min_buy, 10) || minNum"
					:max="parseInt(product.max_buy, 10) || (maxNum === 0 ? parseInt(stock || product.stock, 10) : maxNum)"
					:value="cartCount"
					@eventChange="numberChange"
				></rf-number-box>
			</view>
		</scroll-view>
		<button v-if="!showBuyBtn" class="btn" :class="'bg-' + themeColor.name" @tap="toggleSpec">完成</button>
		<view class="btn-group" v-else>
			<button class="btn" :class="'bg-' + themeColor.name" @tap="toggleSpec(1)">加入购物车</button>
			<button class="btn" :class="'bg-' + themeColor.name" @tap="toggleSpec(2)">立即购买</button>
		</view>
	</view>
</template>
<script>
/**
 *@des 商品规范组件
 *@author stav stavyan@qq.com
 *@blog https://stavtop.club
 *@date 2020/05/03 19:17:15
 */
import rfNumberBox from '@/components/rf-number-box';
export default {
	name: 'rfAttrContent',
	components: { rfNumberBox },
	props: {
		showBuyBtn: {
			type: Boolean,
			default: false
		},
		isSelectedNum: {
			type: Boolean,
			default: true
		},
		type: {
			type: String,
			default: 'buy_now'
		},
		product: {
			type: Object,
			default() {
				return {};
			}
		},
		minNum: {
			type: Number,
			default: 1
		},
		maxNum: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			skuId: this.product && this.product.spec_items[0]._id,
			price: null,
			stock: this.product && this.product.spec_items[0].stock,
			cartCount: parseInt(this.product.min_buy, 10) || this.minNum || 1,
			picture: null,
			moneySymbol: this.moneySymbol,
			skuName: null
		};
	},
	computed: {},
	async mounted() {
		await this.initData();
	},
	methods: {
		initData() {},
		numberChange(data) {
			this.cartCount = parseInt(data.number, 10);
		},

		toggleSpec(type) {
			if (!this.skuId) {
				this.$mHelper.toast('请选择规格');
				return;
			}
			if (this.stock < 1) {
				this.$mHelper.toast('库存不足');
				return;
			}
			this.$emit('toggle', {
				spec_items: [
					{
						stock: this.stock
					}
				],
				skuId: this.skuId,
				cartCount: this.cartCount,
				skuName: this.skuName || this.singleSkuText,
				price: this.price,
				type: type
			});
		}
	}
};
</script>
<style scoped lang="scss">
.sku-info-wrapper {
	width: 100%;
	padding-bottom: $spacing-sm;
}
.price-wrapper {
	height: 38upx;
	display: flex;
	align-items: center;
	margin: $spacing-sm 0;
	.image {
		width: 120upx;
		height: 38upx;
	}
	.base-color {
		margin-top: 2upx;
	}
}
.btn-group {
	display: flex;
	justify-content: space-between;
	.btn {
		width: 40vw;
	}
}
</style>
